<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        .draft {
            padding: 15px;
            width: 700px;
            border: 2px solid cadetblue;
        }

        .draft-label {
            font-size: 15px;
            font-weight: 500;
        }

        .draft-base .draft-label::before {
            content: '';
            margin-right: 5px;
            border-left: 5px solid #ff7402;
        }

        .flex-content {
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }

        .flex-content .draft-label {
            flex-basis: 150px;
            text-align: right;
            margin-right: 20px;
        }

        .flex-content .content {
            width: 100%;
        }

        .right-float {
            float: right;
        }

        .right-float::after {
            clear: both;
        }

        .ope-btn {
            color: #0b9aea;
            font-size: 14px;
            margin: 0 10px;
            cursor: pointer;
        }

        .prod-item {
            background-color: #f7fcff;
            border: 2px dashed #D8F1FE;
            padding: 8px;
        }

        .prod-item .tit {
            font-size: 13px;
            padding: 8px 0;
            font-weight: 500;
            border-bottom: 1px solid #666;
        }

        .prod-item .item{
            flex-basis: 100px;
            font-size: 13px;
        }

        .prod-item .box{
            margin: 12px 0;
        }

        .add-prod{
            color: #0b9aea;
            font-size: 13px;
            margin: 8px 0;
        }

        .per-select{
            color: #0b9aea;
            /*font-size: 14px;*/
            cursor: pointer;
            text-underline: #0b9aea;
            text-decoration: underline;
        }
        .form-btns{
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }

        .form-btns button{
            display: block;
            border: none;
            color: white;
            background-color: #199ed8;
            padding: 5px 12px;
            margin: 5px 12px;
        }
    </style>
</head>
<body>
<div class="draft">
    <div class="flex-content draft-base">
        <h3 class="draft-label">日志时间选择:</h3>
        <div class="content">
            <input type="date">
        </div>
    </div>
    <div class="flex-content draft-base">
        <h3 class="draft-label">生产日志采编:</h3>
        <div class="content">
            <div class="right-float">
                <span class="ope-btn">一键导入</span>
                <span class="ope-btn">一键复制</span>
            </div>

        </div>
    </div>
    <div class="prod-item">
        <h3 class="tit">生产日志项目1</h3>
        <div class="flex-content box">
            <div class="draft-label item">工作大类:</div>
            <div class="content">
                <input type="text">
            </div>
        </div>
        <div class="flex-content box">
            <div class="draft-label item">工作大类:</div>
            <div class="content">
                <input type="text">
            </div>
        </div>
        <div class="flex-content box">
            <div class="draft-label item">工作大类:</div>
            <div class="content">
                <input type="text">
            </div>
        </div>
    </div>
    <div class="add-prod">
        +新增生产日志项目
    </div>
    <div class="flex-content draft-base">
        <h3 class="draft-label">审批人员:</h3>
        <div class="content">
            <span class="per-select">人员选择</span>
        </div>
    </div>

    <div class="flex-content">
        <h3 class="draft-label"></h3>
        <div class="content">
            <div class="form-btns">
                <button>保存</button>
                <button>提交</button>
                <button>提交</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>
